import EmoText from "./Emo-Text.vue";
import type { Meta, StoryObj } from "@storybook/vue3-vite";
import type { ThemeType, SizeType } from "@type/index";

// 定义 Story 的类型
type Story = StoryObj<typeof EmoText>;

const meta: Meta<typeof EmoText> = {
  title: "通用/文字组件",
  component: EmoText,
  tags: ["autodocs"],
  // 使用自定义类型配置 argTypes
  argTypes: {
    type: {
      control: { type: "select" },
      options: [
        null,
        "primary",
        "success",
        "warning",
        "danger",
        "info",
      ] as ThemeType[],
      description: "组件主题类型",
    },
    size: {
      control: { type: "select" },
      options: ["small", "middle", "large"] as SizeType[],
      description: "组件尺寸",
    },
    text: {
      control: { type: "text" },
      description: "显示的文本内容",
    },
    color: {
      control: { type: "color" },
      description: "文本颜色",
    },
    width: {
      control: { type: "text" },
      description: "组件宽度",
    },
    height: {
      control: { type: "text" },
      description: "组件高度",
    },
  },
  // 设置默认参数
  args: {
    text: "这是示例文本",
    size: "middle" as SizeType,
    color: "#000",
  },
};

export default meta;

// 基础示例
export const Basic: Story = {
  name: "基础样式",
  args: {
    text: "基础文本组件",
  },
};

// 不同主题类型示例
export const ThemeVariants: Story = {
  name: "主题样式",
  render: () => ({
    components: { EmoText },
    template: `
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <EmoText text="Primary 主题" type="primary" />
                <EmoText text="Success 主题" type="success" />
                <EmoText text="Warning 主题" type="warning" />
                <EmoText text="Danger 主题" type="danger" />
                <EmoText text="Info 主题" type="info" />
                  <EmoText text="Info 主题" type="info" >
                  基础文本组件基础文本组件<br/>
                  基础文本组件<br/>
                  基础文本组件
                  </EmoText>
            </div>
        `,
  }),
};

// 不同尺寸示例
export const SizeVariants: Story = {
  name: "尺寸样式",
  render: () => ({
    components: { EmoText },
    template: `
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <EmoText text="小尺寸文本 12px" size="small" />
                <EmoText text="中尺寸文本 18px" size="middle" />
                <EmoText text="大尺寸文本 24px" size="large" />
            </div>
        `,
  }),
};

// 自定义颜色示例
export const CustomColor: Story = {
  name: "自定义颜色",
  args: {
    text: "自定义颜色文本",
    color: "#802eff",
  },
};

// 交互式示例
export const Interactive: Story = {
  args: {
    text: "点击我试试",
    type: "success" as ThemeType,
    size: "large" as SizeType,
    color: "#52c41a",
  },
  argTypes: {
    // 可以为特定 story 覆盖 argTypes
    type: {
      control: { type: "select" },
      options: [
        "primary",
        "success",
        "warning",
        "danger",
        "info",
      ] as ThemeType[],
    },
  },
};
